<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Bootstrap Input Box</title>
  </head>
  <body>
    <div>
      <label>输入框 1</label>
      <input type="text" id="myInput" placeholder="请输入内容" />
    </div>
    <div>
      <label>输入框 2</label>
      <input type="text" id="myInput2" value="abc" placeholder="请输入内容"/>
    </div>

    <script>
      // JavaScript 代码开始
      // 使用 document.getElementById 方法获取输入框元素
      var input_value1 = document.getElementById("myInput");
      var input_value2 = document.getElementById("myInput2");

      // 读取输入框的初始值
      console.log("input_value1:", input_value1.value);
      console.log("input_value2:", input_value2.value);

      // 为输入框添加输入事件监听器
      input_value1.addEventListener("input", function () {
        console.log("输入框1的值发生了变化:", input_value1.value);
      });
      input_value2.addEventListener("input", function () {
        console.log("输入框2的值发生了变化:", input_value2.value);
      });
    </script>
  </body>
</html>
